<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挚夕影院</title>
    <!-- <link rel="stylesheet" href="../static/lib/bootstrap-4.6.2/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <!-- <script src="../static/lib/bootstrap-4.6.2/bootstrap.min.js"></script> -->
</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(1)" class="layui-nav m-pl-sm m-pr-sm" lay-filter="">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item layui-this"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>

</ul>

<!-- 内容 -->
<div class="layui-container m-mt" style="width: 85%;">
    <!-- 轮播图 -->
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-carousel" id="carousel1">
                <div carousel-item>
                    <div>
                        <img th:src="@{/images/top1.jpg}" width="100%" height="100%" style="object-fit: cover;">
                    </div>
                    <div>
                        <img th:src="@{/images/top2.jpg}" width="100%" height="100%" style="object-fit: cover;">
                    </div>
                    <div>
                        <img th:src="@{/images/top3.jpg}" width="100%" height="100%" style="object-fit: cover;">
                    </div>
                    <div>
                        <img th:src="@{/images/top4.jpg}" width="100%" height="100%" style="object-fit: cover;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row m-mt">
        <div class="layui-col-xs12 layui-col-sm8 layui-col-md7 m-mr-big">
            <!-- 正在热映 -->
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 m-mb">
                    <span class="m-tc-red m-ts-large">正在热映</span>
                    <a th:href="@{/movie(showType=1)}" style="float: right;" class="m-tc-gray m-ts-mid">全部<i
                            class="layui-icon layui-icon-right"></i></a>
                </div>
                <!-- 展示区 -->
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                    <!-- 卡片 -->
                    <div th:each="movie : ${onScreenMovies}"
                         class="layui-col-xs6 layui-col-sm4 layui-col-md3 m-pr-normal m-pb-normal">
                        <a th:href="@{/movie/{id}(id=${movie.id})}">
                            <img th:src="@{${movie.poster}}" width="100%">
                            <div th:text="${movie.name}" class="m-pb-normal m-pt-normal" style="text-align: center;">
                                送你一朵小红花
                            </div>
                            <div th:text="${movie.movieRate.score}" class="m-tc-yellow m-ts-normal"
                                 style="text-align: center;">
                                8.0
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 即将上映 -->
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 m-mb">
                    <span class="m-tc-blue m-ts-large">即将上映</span>
                    <a th:href="@{/movie(showType=2)}" style="float: right;" class="m-tc-gray m-ts-mid">全部<i
                            class="layui-icon layui-icon-right"></i></a>
                </div>
                <!-- 展示区 -->
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                    <!-- 卡片 -->
                    <div th:each="movie : ${upComingMovies}"
                         class="layui-col-xs6 layui-col-sm4 layui-col-md3 m-pr-normal m-pb-normal">
                        <a th:href="@{/movie/{id}(id=${movie.id})}">
                            <img th:src="@{${movie.poster}}" width="100%">
                            <div th:text="${movie.name}" class="m-pb-normal m-pt-normal" style="text-align: center;">
                                送你一朵小红花
                            </div>
                            <div th:text="${movie.movieRate.score}" class="m-tc-yellow m-ts-normal"
                                 style="text-align: center;">
                                8.0
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 经典影片 -->
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 m-mb">
                    <span class="m-tc-orange m-ts-large">经典影片</span>
                    <a th:href="@{/movie(showType=3)}" style="float: right;" class="m-tc-gray m-ts-mid">全部<i
                            class="layui-icon layui-icon-right"></i></a>
                </div>
                <!-- 展示区 -->
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                    <!-- 卡片 -->
                    <div th:each="movie : ${classicalMovies}"
                         class="layui-col-xs6 layui-col-sm4 layui-col-md3 m-pr-normal m-pb-normal">
                        <a th:href="@{/movie/{id}(id=${movie.id})}">
                            <img th:src="@{${movie.poster}}" width="100%">
                            <div th:text="${movie.name}" class="m-pb-normal m-pt-normal" style="text-align: center;">
                                送你一朵小红花
                            </div>
                            <div th:text="${movie.movieRate.score}" class="m-tc-yellow m-ts-normal"
                                 style="text-align: center;">
                                8.0
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
            <!-- Top100 -->
            <!-- 正在热映 -->
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                    <span class="m-tc-yellow m-ts-large">TOP100</span>
                    <a th:href="@{/movie/top}" style="float: right;" class="m-tc-gray m-ts-mid">
                        查看完整榜单<i class="layui-icon layui-icon-right"></i>
                    </a>
                    <!-- 一项 -->
                    <div th:each="item, it : ${topMovies}" class="m-ml-big m-pt-mid" style="width: 80%;">
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
                            <span class="m-tc-yellow" th:text="${it.count}">1</span>
                        </div>
                        <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
                            <a th:href="@{/movie/{id}(id=${item.id})}" th:text="${item.name}"
                               class="m-ts-normal">速度与激情7</a>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
                            <span th:text="${item.score}" class="m-tc-yellow">10.0分</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    layui.use(function () {
        var layer = layui.layer
            , form = layui.form,
            element = layui.element,
            carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#carousel1'
            , width: '100%' //设置容器宽度
            , height: '400px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        // layer.msg('Hello World');
    });
</script>
</body>

</html>